<template>
	<view>
		<view style="display: none;" class="tips color_fff size_12 align_c" :class="{ show: ajax.loading }" @tap="getHistoryMsg">{{ ajax.loadText }}</view>

		<view class="h208">
			<view class="flex-end mr20"><image @click="goSet" src="/static/img/pages_friend/baseline.svg" mode="" style="width: 48rpx;height: 48rpx;"></image></view>
		</view>
		<!-- <view class="" @click="faMessage">发送消息</view> -->
		<view class="box-1" id="list-box">
			<view class="talk-list">
				<view class="itemWrap" v-for="(item, index) in talkList" :key="index" :id="`msg-${item.id}`">
					<view class="flex-cen">
						<view class=" messageStyle">{{ $u.timeFormat(item.ucreateTime, 'hh:MM:ss') }}</view>
					</view>
					<view v-if="item.content" class="item flex_col" :class="item.from === userInfo.userId ? 'push' : 'pull'">
						<!-- <image :src="item.pic || avatar" mode="aspectFill" class="pic"></image> -->
						<u-avatar :src="item.pic || avatar"></u-avatar>
						<view class="content">{{ item.content }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState, //先导入mapState方法
	mapMutations
} from 'vuex';
export default {
	data() {
		return {
			talkList: [],
			groupMessage: {},
			avatar: ''
		};
	},
	computed: {
		...mapState('user', ['userInfo'])
	},
	mounted() {},
	// 监听页面卸载
	onHide() {},
	onShow() {
		uni.setNavigationBarTitle({});
		this.getGroupHistory();
	},
	onPageScroll(e) {
		if (e.scrollTop < 5) {
			this.getHistoryMsg();
		}
	},
	onLoad(options) {
		console.log(options, 'options');
		let load = JSON.parse(options.query.data);
		this.groupMessage = load;
	},
	onUnload() {
		this.scoketClose();
		this.$socketIo.traderDetailIndex = 100; // 初始化 tabIndex
	},
	methods: {
		goSet() {
			uni.navigateTo({
				url: `/pages_circle/circleSet/circleSet?data=` + encodeURIComponent(JSON.stringify(this.groupMessage))
			});
		},
		scoketClose() {
			this.$socketIo.connectNum = 1;
			const data = {
				cmd: 14,
				userId: this.userInfo.userId
			};
			this.$socketIo.send(data); // 这是给后端发送特定数据 关闭推送
			this.$socketIo.Close(); // 主动 关闭连接 ， 不会重连
		},
		getGroupHistory() {
			let userInfo = uni.getStorageSync('userInfo');
			// 要发送的数据包
			const data = {
				cmd: 19,
				userId: userInfo.userId,
				groupId: this.groupMessage.ugroupId,
				type: 1
			};
			// 打开连接
			this.$socketIo.connectSocketInit(data);
			// 接收数据
			uni.$on('getPositonsOrder', res => {
				this.connect = true;
				console.log(res, 'res');
				const { code, data } = res;
				if (code == 10018) {
					// 根据后端传过来的数据进行 业务编写。。。
					let name = this.groupMessage.ugroupId;
					console.log(name, 'name');
					this.talkList = data.groups[name];
				} else {
				}
			});
			// 错误时做些什么
			uni.$on('connectError', () => {
				this.connect = false;
				this.scoketError = true;
			});
		},
		/* test */
		faMessage() {
			// 要发送的数据包
			const data = {
				from: '1640909501138202625',
				to: '1638492140986175489',
				cmd: 11,
				msgType: 0,
				chatType: 1,
				groupId: this.groupMessage.ugroupId,
				content: Math.random()
			};
			// 打开连接
			this.$socketIo.connectSocketInit(data);
			// 接收数据
			uni.$on('getPositonsOrder', res => {
				this.connect = true;
				console.log(res, 'res');
				const { Code, data } = res;
				// if (Code == xxxx) {
				// 	// 根据后端传过来的数据进行 业务编写。。。
				// } else {
				// }
			});
			// 错误时做些什么
			uni.$on('connectError', () => {
				this.connect = false;
				this.scoketError = true;
			});
		}
	}
};
</script>

<style lang="scss">
// @import "../../lib/global.scss";
page {
	// background-color: #f3f3f3;
	font-size: 28rpx;
}

/* 加载数据提示 */
.tips {
	position: fixed;
	left: 0;
	top: var(--window-top);
	width: 100%;
	z-index: 9;
	background-color: rgba(0, 0, 0, 0.15);
	height: 72rpx;
	line-height: 72rpx;
	transform: translateY(-80rpx);
	transition: transform 0.3s ease-in-out 0s;

	&.show {
		transform: translateY(0);
	}
}

.box-1 {
	width: 100%;
	height: auto;
	padding-bottom: 100rpx;
	box-sizing: content-box;

	/* 兼容iPhoneX */
	margin-bottom: 0;
	margin-bottom: constant(safe-area-inset-bottom);
	margin-bottom: env(safe-area-inset-bottom);
}

.box-2 {
	position: fixed;
	left: 0;
	width: 100%;
	bottom: 0;
	height: auto;
	z-index: 2;
	border-top: #e5e5e5 solid 1px;
	box-sizing: content-box;
	background-color: #f3f3f3;

	/* 兼容iPhoneX */
	padding-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);

	> view {
		padding: 0 20rpx;
		height: 100rpx;
	}

	.content {
		background-color: #fff;
		height: 64rpx;
		padding: 0 20rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
	}

	.send {
		background-color: #42b983;
		color: #fff;
		height: 64rpx;
		margin-left: 20rpx;
		border-radius: 32rpx;
		padding: 0;
		width: 120rpx;
		line-height: 62rpx;

		&:active {
			background-color: #5fc496;
		}
	}
}

.talk-list {
	.itemWrap {
		padding-bottom: 20rpx;
	}

	/* 消息项，基础类 */
	.item {
		padding: 20rpx 20rpx 0 20rpx;
		align-items: flex-start;
		align-content: flex-start;
		color: #333;

		.pic {
			width: 92rpx;
			height: 92rpx;
			border-radius: 50%;
			border: #fff solid 1px;
		}

		.content {
			padding: 20rpx;
			// padding-left: 42rpx;
			border-radius: 4px;
			max-width: 500rpx;
			min-width: 130rpx;
			word-break: break-all;
			line-height: 52rpx;
			// line-height: 24rpx;
			position: relative;
		}

		/* 收到的消息 */
		&.pull {
			.content {
				margin-left: 32rpx;
				background-color: #fff;
				border-radius: 20rpx 72rpx 72rpx 72rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #606060;
				&::after {
					// content: '';
					display: block;
					width: 0;
					height: 0;
					border-top: 16rpx solid transparent;
					border-bottom: 16rpx solid transparent;
					border-right: 20rpx solid #fff;
					position: absolute;
					top: 30rpx;
					left: -18rpx;
				}
			}
		}

		/* 发出的消息 */
		&.push {
			/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
			flex-direction: row-reverse;

			.content {
				margin-right: 32rpx;
				background-color: #9d67f3;
				border-radius: 72rpx 20rpx 72rpx 72rpx !important;

				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #ffffff;

				&::after {
					// content: '';
					display: block;
					width: 0;
					height: 0;
					border-top: 16rpx solid transparent;
					border-bottom: 16rpx solid transparent;
					border-left: 20rpx solid #a0e959;
					position: absolute;
					top: 30rpx;
					right: -18rpx;
				}
			}
		}
	}
}
</style>
